var xmlHttp;
var map;
var cities;
var email=document.getElementById('useremail').innerHTML;
//Create a XMLHttpRequest object
function createXMLHttpRequest()
{
    if(window.ActiveXObject)
    {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
        xmlHttp=new XMLHttpRequest();
    }
}
//Handle the return data using AJAX
function handleStateChange()
{
    if(xmlHttp.readyState==4)
    {
        if(xmlHttp.status==200)
        {
            xmlDoc=xmlHttp.responseXML;
            la=xmlDoc.getElementsByTagName("countrylongitude")[0].childNodes[0].nodeValue;
            lb=xmlDoc.getElementsByTagName("countrylatitude")[0].childNodes[0].nodeValue;
            
            var myOptions = {
                zoom: 6,
                center: new google.maps.LatLng(la, lb),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);
            cities=new Array();
            for(var k=0;k<9;k++){
                cities[k]=[xmlDoc.getElementsByTagName("citylongitude")[k].childNodes[0].nodeValue,xmlDoc.getElementsByTagName("citylatitude")[k].childNodes[0].nodeValue,xmlDoc.getElementsByTagName("cityname")[k].childNodes[0].nodeValue,xmlDoc.getElementsByTagName("citydescription")[k].childNodes[0].nodeValue];
            }

            var images ='images/light_s.png';

            for(var i=0;i<cities.length;i++){
                var title=""+cities[i][2];

                var myLatLng = new google.maps.LatLng(cities[i][0], cities[i][1]);
                var countryMarker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: images,
                    title:title
                });

                attachMessage(countryMarker, i);
            }

        }
    }
}

function attachMessage(marker, number) {
    var link1 ="MakeComments.jsp?city="+cities[number][2]+"&useremail="+document.getElementById('useremail').innerHTML;
    var link2="VisitedCity.jsp?city="+cities[number][2]+"&useremail="+document.getElementById('useremail').innerHTML;
    var contents='<h1>'+cities[number][2]+'</h1>'+
    '<a href='+link1+'>Post the comments</a><br />'+
    '<a href='+link2+'>I have visited here</a>'+
    '<a href='+link2+'>Focus here</a>'+
    '<span id="rateStatus">Rate Me...</span>'+
    '<div id="rateMe" title="Rating">'+
    '<a onclick="rateIt(this)" id="_1" title="Just so so..." onmouseover="rating(this)" onmouseout="off(this)"></a>'+
    '<a onclick="rateIt(this)" id="_2" title="Not Bad" onmouseover="rating(this)" onmouseout="off(this)"></a>'+
    '<a onclick="rateIt(this)" id="_3" title="Pretty Good" onmouseover="rating(this)" onmouseout="off(this)"></a>'+
    '<a onclick="rateIt(this)" id="_4" title="Great ^_^" onmouseover="rating(this)" onmouseout="off(this)"></a>'+
    '<a onclick="rateIt(this)" id="_5" title="Awesome!" onmouseover="rating(this)" onmouseout="off(this)"></a>'+
    '</div>'+
    '<link rel=stylesheet href="../css/rating.css" type="text/css" />'+
    '<script type="text/javascript" language="javascript" src="rating.js"></script>'+
    '<div id="bodyContent">'+cities[number][3]+
    '</div>';
    var infowindow = new google.maps.InfoWindow(
    {
        content: contents,
        size: new google.maps.Size(50,50)
    });
    google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.open(map,marker);

        
    });

    google.maps.event.addListener(marker, 'click', function() {
        window.location.href=cities[number][2]+'.jsp?city='+cities[number][2];
    });
}

//Send AJAX request
function initialize() {
    createXMLHttpRequest();
    str=document.getElementById('country').innerHTML;
    var queryString="Country.do"+"?country="+str;
    xmlHttp.onreadystatechange=handleStateChange;
    xmlHttp.open("GET",queryString,true);
    xmlHttp.send(null);
}


